<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能代码命名规范管理系统</title>
    <link rel="stylesheet" href="https://www.unpkg.com/ew-message/dist/ew-message.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
    <style>
        :root {
            --primary-color: #3b82f6;
            --primary-hover: #2563eb;
            --secondary-color: #f8fafc;
            --accent-color: #8b5cf6;
            --success-color: #10b981;
            --warning-color: #f59e0b;
            --error-color: #ef4444;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --border-color: #e2e8f0;
            --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --card-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            --radius: 12px;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg-gradient);
            min-height: 100vh;
            color: var(--text-primary);
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: var(--card-shadow);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }

        .main-content {
            padding: 40px;
        }

        .converter-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 40px;
        }

        .converter-card {
            background: white;
            border-radius: var(--radius);
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            border: 1px solid var(--border-color);
            transition: all 0.3s ease;
        }

        .converter-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }

        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--border-color);
        }

        .card-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            color: white;
            font-size: 18px;
        }

        .card-title {
            font-size: 1.3em;
            font-weight: 600;
            color: var(--text-primary);
        }

        .input-group {
            margin-bottom: 20px;
        }

        .input-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text-secondary);
            font-size: 0.9em;
        }

        .input-field {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            font-size: 14px;
            font-family: 'JetBrains Mono', monospace;
            transition: all 0.3s ease;
            background: #fafafa;
        }

        .input-field:focus {
            outline: none;
            border-color: var(--primary-color);
            background: white;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .input-field::placeholder {
            color: #9ca3af;
        }

        .btn-group {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;
        }

        .btn {
            padding: 12px 20px;
            font-size: 14px;
            font-weight: 500;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            flex: 1;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
        }

        .btn-secondary {
            background: var(--secondary-color);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
        }

        .btn-secondary:hover {
            background: #e2e8f0;
            transform: translateY(-2px);
        }

        .result-area {
            background: #f8fafc;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            padding: 16px;
            min-height: 60px;
            display: flex;
            align-items: center;
        }

        .result-text {
            font-family: 'JetBrains Mono', monospace;
            font-size: 14px;
            color: var(--text-primary);
            background: transparent;
            border: none;
            width: 100%;
            outline: none;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }

        .feature-card {
            background: white;
            border-radius: var(--radius);
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            border: 1px solid var(--border-color);
            transition: all 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }

        .feature-title {
            font-size: 1.2em;
            color: var(--text-primary);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .feature-icon {
            width: 30px;
            height: 30px;
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 14px;
        }

        .naming-examples {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }

        .example-item {
            background: #f1f5f9;
            padding: 12px;
            border-radius: 6px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 12px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid #e2e8f0;
        }

        .example-item:hover {
            background: #e2e8f0;
            transform: scale(1.02);
        }

        .dashboard {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            padding: 30px;
            border-radius: var(--radius);
            margin-top: 30px;
        }

        .dashboard h2 {
            text-align: center;
            margin-bottom: 20px;
            font-size: 1.8em;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }

        .stat-item {
            background: rgba(255, 255, 255, 0.2);
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            backdrop-filter: blur(10px);
        }

        .stat-number {
            font-size: 2em;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .stat-label {
            font-size: 0.9em;
            opacity: 0.9;
        }

        .alert {
            padding: 12px 16px;
            border-radius: 8px;
            margin-top: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
        }

        .alert.success {
            background: linear-gradient(135deg, #a8edea, #fed6e3);
            color: #2c5530;
            border: 1px solid #a8edea;
        }

        .alert.error {
            background: linear-gradient(135deg, #ff9a9e, #fecfef);
            color: #8b0000;
            border: 1px solid #ff9a9e;
        }

        .alert.warning {
            background: linear-gradient(135deg, #ffecd2, #fcb69f);
            color: #8b4513;
            border: 1px solid #ffecd2;
        }

        .footer {
            background: #f8f9fa;
            padding: 20px;
            text-align: center;
            color: #666;
            border-top: 1px solid #e0e0e0;
        }

        /* 自定义下拉框样式 */
        .ew-select {
            position: relative;
            width: 100%;
        }

        .select-header {
            padding: 12px 16px;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            background: #fafafa;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s ease;
            font-size: 14px;
            font-family: 'JetBrains Mono', monospace;
        }

        .select-header:hover {
            background: white;
            border-color: var(--primary-color);
        }

        .select-header .arrow {
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid #666;
            transition: transform 0.3s ease;
        }

        .ew-select.open .arrow {
            transform: rotate(180deg);
        }

        .select-options {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            margin-top: 4px;
            max-height: 200px;
            overflow-y: auto;
            display: none;
            z-index: 1000;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .select-option {
            padding: 12px 16px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            transition: all 0.3s ease;
            font-size: 14px;
        }

        .select-option:hover {
            background: #f1f5f9;
        }

        .ew-select.open .select-options {
            display: block;
        }

        /* 代码高亮样式 */
        .code-highlight {
            background: #1e1e1e;
            border-radius: 8px;
            overflow: hidden;
            margin-top: 15px;
        }

        .code-header {
            background: #2d2d2d;
            padding: 10px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #404040;
        }

        .code-title {
            color: #e0e0e0;
            font-size: 12px;
            font-weight: 500;
        }

        .code-actions {
            display: flex;
            gap: 8px;
        }

        .code-action-btn {
            background: #404040;
            border: none;
            color: #e0e0e0;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .code-action-btn:hover {
            background: #505050;
        }

        .code-content {
            padding: 0;
            margin: 0;
        }

        .code-content pre {
            margin: 0;
            padding: 15px;
            background: transparent;
            border-radius: 0;
        }

        .code-content code {
            font-family: 'JetBrains Mono', monospace;
            font-size: 13px;
            line-height: 1.5;
        }

        @media (max-width: 768px) {
            .converter-section {
                grid-template-columns: 1fr;
            }
            
            .features-grid {
                grid-template-columns: 1fr;
            }
            
            .header h1 {
                font-size: 2em;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <h1>🔧 智能代码命名规范管理系统</h1>
            <p>多场景命名转换 - 统一的代码规范管理</p>
        </div>

        <div class="main-content">
            <!-- 主要转换区域 -->
            <div class="converter-section">
                <!-- 驼峰转蛇形 -->
                <div class="converter-card">
                    <div class="card-header">
                        <div class="card-icon">🐪</div>
                        <div class="card-title">驼峰命名转换</div>
                    </div>
                    
                    <div class="input-group">
                        <label>输入驼峰命名</label>
                        <input type="text" id="camelCaseInput" class="input-field" placeholder="例如：camelCaseExample">
                    </div>
                    
                    <div class="input-group">
                        <label>分隔符</label>
                        <input type="text" id="camelCaseSymbolInput" class="input-field" placeholder="例如：_" value="_">
                    </div>
                    
                    <div class="btn-group">
                        <button id="convertCamelBtn" class="btn btn-primary">
                            <i class="fas fa-sync-alt"></i> 转换
                        </button>
                        <button id="copyCamelBtn" class="btn btn-secondary">
                            <i class="far fa-copy"></i> 复制
                        </button>
                    </div>
                    
                    <div class="result-area">
                        <input type="text" id="camelCaseOutput" class="result-text" readonly placeholder="转换结果将显示在这里">
                    </div>
                    
                    <div id="camelCaseAlert" class="alert" style="display: none;"></div>
                </div>

                <!-- 蛇形转驼峰 -->
                <div class="converter-card">
                    <div class="card-header">
                        <div class="card-icon">🐍</div>
                        <div class="card-title">蛇形命名转换</div>
        </div>

        <div class="input-group">
                        <label>输入蛇形命名</label>
                        <input type="text" id="snakeCaseInput" class="input-field" placeholder="例如：snake_case_example">
        </div>

        <div class="input-group">
                        <label>转换类型</label>
                        <div id="camelCaseTypeSelect"></div>
        </div>

        <div class="btn-group">
                        <button id="convertSnakeBtn" class="btn btn-primary">
                <i class="fas fa-sync-alt"></i> 转换
            </button>
                        <button id="copySnakeBtn" class="btn btn-secondary">
                            <i class="far fa-copy"></i> 复制
            </button>
        </div>

                    <div class="result-area">
                        <input type="text" id="snakeCaseOutput" class="result-text" readonly placeholder="转换结果将显示在这里">
                    </div>
                    
                    <div id="snakeCaseAlert" class="alert" style="display: none;"></div>
                </div>
            </div>

            <!-- 功能特性 -->
            <div class="features-grid">
                <!-- 命名规范检查 -->
                <div class="feature-card">
                    <div class="feature-title">
                        <div class="feature-icon">✅</div>
                        命名规范检查
                    </div>
                    <div class="input-group">
                        <label>检查变量名</label>
                        <input type="text" id="namingCheckInput" class="input-field" placeholder="输入变量名进行检查">
                    </div>
                    <button id="checkNamingBtn" class="btn btn-primary" style="width: 100%;">
                        <i class="fas fa-check"></i> 检查规范
                    </button>
                    <div id="namingCheckResult" class="alert" style="display: none;"></div>
                </div>

                <!-- 批量转换 -->
                <div class="feature-card">
                    <div class="feature-title">
                        <div class="feature-icon">📝</div>
                        批量命名转换
                    </div>
                    <div class="input-group">
                        <label>批量输入（每行一个）</label>
                        <textarea id="batchInput" class="input-field" rows="4" placeholder="camelCaseExample&#10;anotherVariable&#10;thirdExample"></textarea>
                    </div>
                    <div class="btn-group">
                        <button id="batchConvertBtn" class="btn btn-primary">
                            <i class="fas fa-magic"></i> 批量转换
                        </button>
                        <button id="copyBatchBtn" class="btn btn-secondary">
                            <i class="far fa-copy"></i> 复制全部
                        </button>
                    </div>
                    <div id="batchResult" class="result-area" style="display: none;">
                        <textarea id="batchOutput" class="result-text" rows="4" readonly></textarea>
                    </div>
                </div>

                <!-- 命名示例 -->
                <div class="feature-card">
                    <div class="feature-title">
                        <div class="feature-icon">💡</div>
                        常用命名示例
                    </div>
                    <div class="naming-examples">
                        <div class="example-item" onclick="fillExample('camelCaseExample')">camelCaseExample</div>
                        <div class="example-item" onclick="fillExample('userName')">userName</div>
                        <div class="example-item" onclick="fillExample('firstName')">firstName</div>
                        <div class="example-item" onclick="fillExample('lastName')">lastName</div>
                        <div class="example-item" onclick="fillExample('emailAddress')">emailAddress</div>
                        <div class="example-item" onclick="fillExample('phoneNumber')">phoneNumber</div>
                    </div>
                </div>

                <!-- 代码生成器 -->
                <div class="feature-card">
                    <div class="feature-title">
                        <div class="feature-icon">⚙️</div>
                        代码生成器
                    </div>
                    <div class="input-group">
                        <label>生成类型</label>
                        <div id="codeTypeSelect"></div>
                    </div>
                    <div class="input-group">
                        <label>变量名</label>
                        <input type="text" id="codeNameInput" class="input-field" placeholder="输入变量名">
                    </div>
                    <button id="generateCodeBtn" class="btn btn-primary" style="width: 100%;">
                        <i class="fas fa-code"></i> 生成代码
                    </button>
                    <div id="generatedCode" class="code-highlight" style="display: none;">
                        <div class="code-header">
                            <span class="code-title">生成的代码</span>
                            <div class="code-actions">
                                <button class="code-action-btn" onclick="copyGeneratedCode()">
                                    <i class="far fa-copy"></i> 复制
                                </button>
                                <button class="code-action-btn" onclick="downloadCode()">
                                    <i class="fas fa-download"></i> 下载
                                </button>
                            </div>
                        </div>
                        <div class="code-content">
                            <pre><code id="codeOutput" class="language-javascript"></code></pre>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 数据统计面板 -->
            <div class="dashboard">
                <h2>📊 命名转换统计</h2>
                <div class="stats-grid">
                    <div class="stat-item">
                        <div class="stat-number" id="total-conversions">0</div>
                        <div class="stat-label">总转换次数</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number" id="camel-to-snake">0</div>
                        <div class="stat-label">驼峰转蛇形</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number" id="snake-to-camel">0</div>
                        <div class="stat-label">蛇形转驼峰</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number" id="batch-conversions">0</div>
                        <div class="stat-label">批量转换</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer">
            <p>© 2024 智能代码命名规范管理系统 | 专业的代码规范管理工具</p>
        </div>
    </div>

    <script src="https://www.unpkg.com/ew-message/dist/ew-message.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
    <script>
        // 自定义下拉框插件
        class Select {
            static currentOpenSelect = null;

            constructor(options = {}) {
                const { container, ...restOptions } = options;
                this.options = {
                    placeholder: "请选择",
                    ...restOptions,
                };
                this.onChange = options.onChange || (() => {});
                this.element = this.createSelectElement();
                if (container) {
                    this.mount(container);
                }
                this.selectedValue = "";
                this.setupEventListeners();
            }

            createSelectElement() {
                const select = document.createElement("div");
                select.className = "ew-select";

                const header = document.createElement("div");
                header.className = "select-header";
                header.innerHTML = `
                    <span>${this.options.placeholder}</span>
                    <span class="arrow"></span>
                `;

                const optionsContainer = document.createElement("div");
                optionsContainer.className = "select-options";

                select.appendChild(header);
                select.appendChild(optionsContainer);

                return select;
            }

            setupEventListeners() {
                const header = this.element.querySelector(".select-header");
                const optionsContainer = this.element.querySelector(".select-options");

                header.addEventListener("click", (e) => {
                    e.stopPropagation();
                    if (Select.currentOpenSelect && Select.currentOpenSelect !== this) {
                        Select.currentOpenSelect.element.classList.remove("open");
                    }
                    this.element.classList.toggle("open");
                    Select.currentOpenSelect = this.element.classList.contains("open")
                        ? this
                        : null;
                });

                document.addEventListener("click", () => {
                    this.element.classList.remove("open");
                    if (Select.currentOpenSelect === this) {
                        Select.currentOpenSelect = null;
                    }
                });

                optionsContainer.addEventListener("click", (e) => {
                    e.stopPropagation();
                            });
            }

            setOptions(options) {
                const optionsContainer = this.element.querySelector(".select-options");
                optionsContainer.innerHTML = "";

                this.options = options;

                options.forEach((option) => {
                    const optionElement = document.createElement("div");
                    optionElement.className = "select-option";
                    optionElement.textContent = option.label || option.value;
                    optionElement.addEventListener("click", () => {
                        this.setValue(option.value);
                        this.element.classList.remove("open");
                        this.onChange(option.value);
                    });
                    optionsContainer.appendChild(optionElement);
                });
            }

            setValue(value) {
                this.selectedValue = value;
                const label = this.options.find((option) => option.value === value)?.label;
                const header = this.element.querySelector(".select-header span");
                header.textContent = label || value;
            }

            getValue() {
                return this.selectedValue;
                    }

            mount(container) {
                if (typeof container === "string") {
                    container = document.querySelector(container);
                }
                container.appendChild(this.element);
        }
        }

        // 核心转换函数
        const fromCamelCase = (str, separator = '_') =>
            str
                .replace(/([a-z\d])([A-Z])/g, '$1' + separator + '$2')
                .replace(/([A-Z]+)([A-Z][a-z\d]+)/g, '$1' + separator + '$2')
                .toLowerCase();

        const toCamelCase = (str, pascalCase = false) => {
            const result = str
                .toLowerCase()
                .replace(/[^a-zA-Z0-9]+(.)/g, (match, chr) => chr.toUpperCase());
            return pascalCase ? result.charAt(0).toUpperCase() + result.slice(1) : result;
        };

        // 全局变量
        let totalConversions = 0;
        let camelToSnakeCount = 0;
        let snakeToCamelCount = 0;
        let batchConversions = 0;
        let camelCaseTypeSelect, codeTypeSelect;

        // 复制功能
        const copyToClipboard = (text) => {
            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(text).then(() => {
                    ewMessage.success('已复制到剪贴板');
                }).catch(() => {
                    ewMessage.error('复制失败');
                });
            } else {
                const textArea = document.createElement('textarea');
                textArea.value = text;
                textArea.style.position = 'fixed';
                textArea.style.left = '-999999px';
                textArea.style.top = '-999999px';
                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();
                try {
                    document.execCommand('copy');
                    ewMessage.success('已复制到剪贴板');
                } catch (err) {
                    ewMessage.error('复制失败');
                }
                document.body.removeChild(textArea);
            }
        };

        // 显示提示信息
        const showAlert = (elementId, message, type) => {
            const alertElement = document.getElementById(elementId);
            alertElement.textContent = message;
            alertElement.className = `alert ${type}`;
            alertElement.style.display = 'flex';
                setTimeout(() => {
                alertElement.style.display = 'none';
                }, 3000);
        };

        // 更新统计数据
        const updateStats = () => {
            document.getElementById('total-conversions').textContent = totalConversions;
            document.getElementById('camel-to-snake').textContent = camelToSnakeCount;
            document.getElementById('snake-to-camel').textContent = snakeToCamelCount;
            document.getElementById('batch-conversions').textContent = batchConversions;
        };

        // 初始化下拉框
        const initSelects = () => {
            // 驼峰类型选择
            camelCaseTypeSelect = new Select({
                container: '#camelCaseTypeSelect',
                placeholder: '选择转换类型',
                onChange: (value) => {
                    // 可以在这里添加选择改变时的逻辑
            }
        });
            camelCaseTypeSelect.setOptions([
                { value: 'camel', label: '小驼峰 (camelCase)' },
                { value: 'pascal', label: '大驼峰 (PascalCase)' }
            ]);
            camelCaseTypeSelect.setValue('camel');

            // 代码类型选择
            codeTypeSelect = new Select({
                container: '#codeTypeSelect',
                placeholder: '选择生成类型',
                onChange: (value) => {
                    // 可以在这里添加选择改变时的逻辑
                }
            });
            codeTypeSelect.setOptions([
                { value: 'variable', label: '变量声明' },
                { value: 'function', label: '函数定义' },
                { value: 'class', label: '类定义' },
                { value: 'constant', label: '常量定义' }
            ]);
            codeTypeSelect.setValue('variable');
        };

        // 驼峰转蛇形
        document.getElementById('convertCamelBtn').addEventListener('click', () => {
            const input = document.getElementById('camelCaseInput').value.trim();
            const separator = document.getElementById('camelCaseSymbolInput').value.trim() || '_';
            
            if (!input) {
                showAlert('camelCaseAlert', '请输入有效的驼峰命名字符串', 'error');
                return;
            }
            
            const result = fromCamelCase(input, separator);
            document.getElementById('camelCaseOutput').value = result;
            showAlert('camelCaseAlert', '转换成功', 'success');
            
            camelToSnakeCount++;
            totalConversions++;
            updateStats();
        });

        // 蛇形转驼峰
        document.getElementById('convertSnakeBtn').addEventListener('click', () => {
            const input = document.getElementById('snakeCaseInput').value.trim();
            const type = camelCaseTypeSelect.getValue();
            
            if (!input) {
                showAlert('snakeCaseAlert', '请输入有效的蛇形命名字符串', 'error');
                return;
            }
            
            const result = toCamelCase(input, type === 'pascal');
            document.getElementById('snakeCaseOutput').value = result;
            showAlert('snakeCaseAlert', '转换成功', 'success');
            
            snakeToCamelCount++;
            totalConversions++;
            updateStats();
        });

        // 复制功能
        document.getElementById('copyCamelBtn').addEventListener('click', () => {
            const result = document.getElementById('camelCaseOutput').value;
            if (result) {
                copyToClipboard(result);
            } else {
                ewMessage.warning('没有可复制的内容');
            }
        });

        document.getElementById('copySnakeBtn').addEventListener('click', () => {
            const result = document.getElementById('snakeCaseOutput').value;
            if (result) {
                copyToClipboard(result);
            } else {
                ewMessage.warning('没有可复制的内容');
            }
        });

        // 命名规范检查
        document.getElementById('checkNamingBtn').addEventListener('click', () => {
            const input = document.getElementById('namingCheckInput').value.trim();
            if (!input) {
                showAlert('namingCheckResult', '请输入要检查的变量名', 'error');
                return;
            }
            
            const checks = [];
            
            // 检查是否以数字开头
            if (/^\d/.test(input)) {
                checks.push('不能以数字开头');
            }
            
            // 检查是否包含特殊字符
            if (/[^a-zA-Z0-9_]/.test(input)) {
                checks.push('包含非法字符');
            }
            
            // 检查长度
            if (input.length > 50) {
                checks.push('名称过长（超过50字符）');
            }
            
            // 检查是否为保留字
            const reservedWords = ['var', 'let', 'const', 'function', 'class', 'if', 'else', 'for', 'while', 'return'];
            if (reservedWords.includes(input.toLowerCase())) {
                checks.push('使用了JavaScript保留字');
            }
            
            if (checks.length === 0) {
                showAlert('namingCheckResult', '✅ 命名规范检查通过', 'success');
            } else {
                showAlert('namingCheckResult', `⚠️ 发现问题：${checks.join('、')}`, 'warning');
            }
        });

        // 批量转换
        document.getElementById('batchConvertBtn').addEventListener('click', () => {
            const input = document.getElementById('batchInput').value.trim();
            if (!input) {
                ewMessage.warning('请输入要转换的内容');
                return;
            }
            
            const lines = input.split('\n').filter(line => line.trim());
            const results = lines.map(line => {
                const camelResult = fromCamelCase(line.trim());
                const snakeResult = toCamelCase(line.trim());
                return `${line.trim()} → ${camelResult} | ${snakeResult}`;
            });
            
            document.getElementById('batchOutput').value = results.join('\n');
            document.getElementById('batchResult').style.display = 'block';
            
            batchConversions++;
            totalConversions += lines.length;
            updateStats();
            
            ewMessage.success(`批量转换完成，共处理 ${lines.length} 个变量名`);
        });

        document.getElementById('copyBatchBtn').addEventListener('click', () => {
            const result = document.getElementById('batchOutput').value;
            if (result) {
                copyToClipboard(result);
            } else {
                ewMessage.warning('没有可复制的内容');
            }
        });

        // 代码生成器
        document.getElementById('generateCodeBtn').addEventListener('click', () => {
            const name = document.getElementById('codeNameInput').value.trim();
            const type = codeTypeSelect.getValue();
            
            if (!name) {
                ewMessage.warning('请输入变量名');
                return;
            }
            
            let generatedCode = '';
            const camelName = toCamelCase(name);
            const pascalName = toCamelCase(name, true);
            const snakeName = fromCamelCase(name);
            const upperName = snakeName.toUpperCase();
            
            switch (type) {
                case 'variable':
                    generatedCode = `// 变量声明示例
let ${camelName} = null;
const ${upperName} = 'default_value';
var ${snakeName} = undefined;`;
                    break;
                case 'function':
                    generatedCode = `// 函数定义示例
function ${camelName}() {
    // 函数实现
    return null;
            }

const ${camelName}Arrow = () => {
    // 箭头函数实现
    return null;
};`;
                    break;
                case 'class':
                    generatedCode = `// 类定义示例
class ${pascalName} {
    constructor() {
        this.${camelName} = null;
    }
    
    ${camelName}Method() {
        // 方法实现
        return this.${camelName};
    }
}`;
                    break;
                case 'constant':
                    generatedCode = `// 常量定义示例
const ${upperName} = 'CONSTANT_VALUE';
const ${camelName}Config = {
    name: '${camelName}',
    type: 'constant'
};`;
                    break;
            }
            
            document.getElementById('codeOutput').textContent = generatedCode;
            document.getElementById('generatedCode').style.display = 'block';
            
            // 重新高亮代码
            Prism.highlightElement(document.getElementById('codeOutput'));
        });

        // 复制生成的代码
        function copyGeneratedCode() {
            const codeElement = document.getElementById('codeOutput');
            const codeText = codeElement.textContent;
            copyToClipboard(codeText);
        }

        // 下载代码
        function downloadCode() {
            const codeElement = document.getElementById('codeOutput');
            const codeText = codeElement.textContent;
            const blob = new Blob([codeText], { type: 'text/javascript' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'generated-code.js';
            a.click();
            URL.revokeObjectURL(url);
            ewMessage.success('代码已下载');
        }

        // 示例填充功能
        function fillExample(example) {
            document.getElementById('camelCaseInput').value = example;
            document.getElementById('convertCamelBtn').click();
        }

        // 键盘事件支持
        document.getElementById('camelCaseInput').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                document.getElementById('convertCamelBtn').click();
            }
        });

        document.getElementById('snakeCaseInput').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                document.getElementById('convertSnakeBtn').click();
            }
        });

        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            initSelects();
            updateStats();
        });
    </script>
</body>

</html>